<template>
	<view class="tabbar">
		<view class="tarbar-list">
			<view class="barPart" @click="changPage(index)" v-for="(list , index) in tabBar.list" :key="index">
				<image :src="selected == index ? list.selectedIconPath : list.iconPath" class="bar_img">
				</image>
				<view class="bar_text" :style='{ color: selected == index ? tabBar.selectedColor : tabBar.color}'>
					{{list.text}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				tabBar: {
					color: '#000000',
					selectedColor: '#a8700d',
					list: [{
							iconPath: "../../static/tab/index.png",
							selectedIconPath: "../../static/tab/indexA.png",
							text: '闲置',
							pagePath: "/pages/index/index",
							iconWith: '50',
							iconHeight: '50',
						},
						{
							iconPath: "../../static/tab/serve.png",
							selectedIconPath: "../../static/tab/serveA.png",
							text: '服务',
							pagePath: "/pages/serve/serve",
							iconWith: '50',
							iconHeight: '50',
						},
						{
							iconPath: "../../static/tab/upload.png",
							selectedIconPath: "../../static/tab/uploada.png",
							pagePath: "/pages/index/indexa",
							text: '任务',
						},
						{
							iconPath: "../../static/tab/release.png",
							selectedIconPath: "../../static/tab/releaseA.png",
							text: '便民',
							pagePath: "/pages/release/release",
							iconWith: '50',
							iconHeight: '50',
						},
						{
							iconPath: "../../static/tab/my.png",
							selectedIconPath: "../../static/tab/myA.png",
							text: '我的',
							pagePath: "/pages/my/my",
							iconWith: '50',
							iconHeight: '50',
						}
					]
				},
				selected: this.current,
			}
		},
		//接收父组件传来的参数
		props: {
			//参数名
			current: {
				type: [Number, String], //参数类型
				default: 0 //默认值
			},
		},
		methods: {
			changPage(index) {
				console.log(index);
				//改变选中下标
				if (this.selected == index) {
					return
				}
				this.selected = index;
				//页面跳转
				uni.switchTab({
					url: this.tabBar.list[index].pagePath
				})
				this.$emit('change', index)

			}
		},
	}
</script>

<style scoped>
	.tarbar-list {
		display: flex;
		align-items: flex-end;
		justify-content: space-around;
		height: 180rpx;
		background-color: #F8F8F8;
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.barPart {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* margin-left: 30rpx; */
		width: 20%;
		font-size: 18rpx;
	}

	.barPart>view {
		margin-bottom: 46rpx;
		text-align: center;
	}

	.barPart>image {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 10rpx;
		/* margin-left: 44rpx; */
		background-color: #F8F8F8;
		/* border-radius: 50%; */
		object-fit: cover;
		object-position: center;
	}
</style>
